<template>
  <el-table :data="tableData" :border="isBorder" size="small" stripe >
    <el-table-column type="expand">
      <template #default="props">
        <div m="4">
          <el-table :data="props.row.family" :border="isBorder" size="small">
            <el-table-column label="工作性质" prop="name" width="200" />
            <el-table-column label="服务对象" prop="state" width="200" />
            <el-table-column label="说明" prop="city" />
          </el-table>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="名称" prop="date" />
    <el-table-column label="编码" prop="coding" />
	<el-table-column label="简码" prop="code" />
	<el-table-column label="位置" prop="address" />
	<el-table-column label="建档时间" prop="date" sortable />
	<el-table-column label="上级部门" prop="super" />
	<el-table-column label="部门负责人" prop="user" />
	<el-table-column label="环境类别" prop="cate" />
	<el-table-column fixed="right" label="操作" width="120" align="center">
      <template #default>
        <el-button link type="primary" size="small">修改</el-button>
        <el-button link type="primary" size="small">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="table-footer">
	<div></div>
	<el-pagination style="--el-color-primary: #20B1EB;" small background layout="prev, pager, next" :total="50" />
  </div>
 
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const isBorder = ref(true)
const tableData = [
  {
    name: '内一科',
    coding: '0101',
    code: 'NYK',
    address: '无',
    date: '2017-11-03',
    super: '住院部',
	user: '',
	cate: '',
    family: [
      {
        name: '临床',
        state: '住院病人',
        city: '直接给病人诊断并决定治疗方案的部门，按照服务对象分为门诊科室等等。',
      },
      {
        name: '治疗',
        state: '住院病人',
        city: '直接给病人诊断并决定治疗方案的部门，按照服务对象分为门诊科室等等。',
      },
      {
        name: '护理',
        state: '住院病人',
        city: '直接给病人诊断并决定治疗方案的部门，按照服务对象分为门诊科室等等。',
      },
    ],
  },
  {
    name: '内一科',
    coding: '0101',
    code: 'NYK',
    address: '无',
    date: '2017-11-03',
    super: '住院部',
	user: '',
	cate: '',
    family: [
      {
        name: '临床',
        state: '住院病人',
        city: '直接给病人诊断并决定治疗方案的部门，按照服务对象分为门诊科室等等。',
      },
      {
        name: '治疗',
        state: '住院病人',
        city: '直接给病人诊断并决定治疗方案的部门，按照服务对象分为门诊科室等等。',
      },
      {
        name: '护理',
        state: '住院病人',
        city: '直接给病人诊断并决定治疗方案的部门，按照服务对象分为门诊科室等等。',
      },
	  {
        name: '西药房',
        state: '住院病人',
        city: '直接给病人诊断并决定治疗方案的部门，按照服务对象分为门诊科室等等。',
      },
      {
        name: '成药房',
        state: '住院病人',
        city: '直接给病人诊断并决定治疗方案的部门，按照服务对象分为门诊科室等等。',
      },
      {
        name: '领药部门',
        state: '门诊和住院病人',
        city: '直接给病人诊断并决定治疗方案的部门，按照服务对象分为门诊科室等等。',
      }
    ],
  },
  {
    name: '内一科',
    coding: '0101',
    code: 'NYK',
    address: '无',
    date: '2017-11-03',
    super: '住院部',
	user: '',
	cate: '',
    family: [
      {
        name: '临床',
        state: '住院病人',
        city: '直接给病人诊断并决定治疗方案的部门，按照服务对象分为门诊科室等等。',
      },
      {
        name: '治疗',
        state: '住院病人',
        city: '直接给病人诊断并决定治疗方案的部门，按照服务对象分为门诊科室等等。',
      },
      {
        name: '护理',
        state: '住院病人',
        city: '直接给病人诊断并决定治疗方案的部门，按照服务对象分为门诊科室等等。',
      },
    ],
  },
  {
    name: '内一科',
    coding: '0101',
    code: 'NYK',
    address: '无',
    date: '2017-11-03',
    super: '住院部',
	user: '',
	cate: '',
    family: [
     {
        name: '临床',
        state: '住院病人',
        city: '直接给病人诊断并决定治疗方案的部门，按照服务对象分为门诊科室等等。',
      },
      {
        name: '治疗',
        state: '住院病人',
        city: '直接给病人诊断并决定治疗方案的部门，按照服务对象分为门诊科室等等。',
      },
      {
        name: '护理',
        state: '住院病人',
        city: '直接给病人诊断并决定治疗方案的部门，按照服务对象分为门诊科室等等。',
      },
    ],
  },
  {
    name: '内一科',
    coding: '0101',
    code: 'NYK',
    address: '无',
    date: '2017-11-03',
    super: '住院部',
	user: '',
	cate: '',
    family: [
     {
        name: '临床',
        state: '住院病人',
        city: '直接给病人诊断并决定治疗方案的部门，按照服务对象分为门诊科室等等。',
      },
      {
        name: '治疗',
        state: '住院病人',
        city: '直接给病人诊断并决定治疗方案的部门，按照服务对象分为门诊科室等等。',
      },
      {
        name: '护理',
        state: '住院病人',
        city: '直接给病人诊断并决定治疗方案的部门，按照服务对象分为门诊科室等等。',
      },
    ],
  },
  {
    name: '内一科',
    coding: '0101',
    code: 'NYK',
    address: '无',
    date: '2017-11-03',
    super: '住院部',
	user: '',
	cate: '',
    family: [
      {
        name: '临床',
        state: '住院病人',
        city: '直接给病人诊断并决定治疗方案的部门，按照服务对象分为门诊科室等等。',
      },
      {
        name: '治疗',
        state: '住院病人',
        city: '直接给病人诊断并决定治疗方案的部门，按照服务对象分为门诊科室等等。',
      },
      {
        name: '护理',
        state: '住院病人',
        city: '直接给病人诊断并决定治疗方案的部门，按照服务对象分为门诊科室等等。',
      },
    ],
  },
  {
    name: '内一科',
    coding: '0101',
    code: 'NYK',
    address: '无',
    date: '2017-11-03',
    super: '住院部',
	user: '',
	cate: '',
    family: [
      {
        name: '临床',
        state: '住院病人',
        city: '直接给病人诊断并决定治疗方案的部门，按照服务对象分为门诊科室等等。',
      },
      {
        name: '治疗',
        state: '住院病人',
        city: '直接给病人诊断并决定治疗方案的部门，按照服务对象分为门诊科室等等。',
      },
      {
        name: '护理',
        state: '住院病人',
        city: '直接给病人诊断并决定治疗方案的部门，按照服务对象分为门诊科室等等。',
      },
    ],
  },
]
</script>
<style lang='scss' scoped>
.table-footer{
	padding: 10px 0;
	text-align: right;
	display: flex;
	justify-content: space-between;
}
</style>
